<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
ul{
    list-style: none;
    margin-left:-40px;
}
.b1{
    position:relative;
    top:-20px;
    left:150px;
}
</style>
     <input id="i1" type="text" placeholder="请输入今日目标" />
     <ul id="u1">
     </ul>
 
 <script>
     var input = document.getElementById('i1');
     input.onkeydown = function(e){
         if(e.keyCode==13){
             if(input.value===''){
                 alert("输入不能为空")
                 return
             }
             ul1 = document.getElementById('u1')
             var li = document.createElement('li')
             li.innerHTML = '<li>'+input.value+'</li>'+'<span><button class="b1">删除</button></span>'
             ul1.appendChild(li);
             input.value = '';
             var del = document.getElementsByClassName('b1')
             for(var i=0;i<del.length;i++){
                del[i].onclick = function(){
                    ul1.removeChild(this.parentNode.parentNode)
                }
             }
         }
     }
 </script>
</body>
</html>